<template>
    <div class="bottom-bar">
      <div class="check-all">
        <check-button @click.native="allClick" :is-checked="isChecked"></check-button>
        <span>全选</span>
      </div>

      <div class="price-all">
        合计:￥{{ $store.getters.sumPrice }}
      </div>

      <div class="calculate">
        去计算({{ $store.getters.checkLength }})
      </div>
    </div>
</template>

<script>
    import CheckButton from 'components/content/checkButton/CheckButton.vue'

    export default {
      name: "CartBottomBar",
      components:{
        CheckButton
      },
      computed:{
        isChecked(){
          return this.$store.getters.isAllChecked
        }
      },
      methods: {
        allClick(){
          this.$store.commit('allClick')
        }
      }
    }
</script>

<style scoped>
  .bottom-bar{
    height: 40px;
    line-height: 40px;
    background-color: #eeeeee;
    position: relative;
    /*bottom: 40px;*/
    display: flex;
    font-size: 15px;
  }
  .bottom-bar > div{
    /*flex: 1;*/
  }
  .check-all{
    display: flex;
    padding-left: 10px;
    align-items: center;
  }
  .check-all span{
    margin-left: 6px;
  }
  .price-all{
    flex: 1;
    text-align: center;
  }
  .calculate{
    width: 90px;
    text-align: center;
    background-color: pink;
  }
</style>
